<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4" id="pringRange">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[
					{ prop: 'likeConfigName', label: '配置名称' },
					{ prop: 'likeConfigKey', label: '参数键值' }
				]"
				:searchFn="() => refTable.reload()"
			/>
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10" v-hasPermi="['secrecy:config:add', 'secrecy:config:remove']">
				<el-button type="primary" @click="insertFn()" icon="Plus" v-hasPermi="['secrecy:config:add']">新增</el-button>
				<el-button
					type="danger"
					:disabled="!tableSelection.length"
					@click="deleteFn(tableSelection)"
					icon="Delete"
					v-hasPermi="['secrecy:config:remove']"
				>
					删除
				</el-button>
			</div>
			<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
				<my-table :data="state.list" :columns="state.columns" columnFilter @selection-change="(val) => (tableSelection = val)">
					<template #default="{ row }">
						<my-button-text @click="detailFn(row)">查看</my-button-text>
						<my-button-text @click="updateFn(row)" v-hasPermi="['secrecy:config:edit']">修改</my-button-text>
						<my-button-text @click="deleteFn(row)" v-hasPermi="['secrecy:config:remove']">删除</my-button-text>
					</template>
				</my-table>
			</my-list-panel>
		</div>

		<!-- 添加或修改部门对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialog.open" width="500px" append-to-body @closed="resetForm(refDialogForm)">
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="90px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{ prop: 'configName', label: '参数名称', required: true },
					{
						prop: 'configKey',
						label: '参数键值',
						required: true,
						bias: true,
						disabled: dialog.name === 'update'
					},
					{ prop: 'configValue', label: '参数值', required: true },
					{
						itemType: 'select',
						prop: 'configType',
						label: '系统内置',
						list: $store.dict.sysYesNo
					},
					{ prop: 'remark', label: '备注', type: 'textarea' }
				]"
			/>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取 消</el-button>
				<el-button type="primary" v-if="!['detail'].includes(dialog.name)" @click.prevent="dialogSubmitFn()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="system/config">
import { addConfig, removeConfig, editConfig, pageConfig } from '@/api/system';

/********************************************************** 表格增删改查 ***********************************************************/
const columns = [
	{
		type: 'selection'
	},
	{
		label: '配置名称',
		prop: 'configName'
	},
	{
		label: '参数键值',
		prop: 'configKey'
	},
	{
		label: '参数值',
		prop: 'configValue'
	},
	{
		label: '系统内置',
		prop: 'configType',
		formatter: (row) => selectDictLabel($store.dict.sysYesNo, row.configType),
		width: 100
	},
	{
		label: '创建时间',
		prop: 'createTime',
		width: 160
	},
	{
		label: '备注',
		prop: 'remark'
	},
	{
		label: '操作',
		width: 150
	}
];

const {
	queryParams,
	refTable,
	state,
	refDialogForm,
	tableSelection,
	dialog,
	dialogTitle,
	loadData,
	insertFn,
	deleteFn,
	updateFn,
	detailFn,
	dialogSubmitFn
} = pageMixin({
	columns,
	api: {
		page: pageConfig,
		remove: removeConfig,
		add: addConfig,
		edit: editConfig
	},
	dialogDefault: {
		title: '参数配置'
	}
});
// 初始化执行逻辑
$store.dict.GETsysYesNo();
</script>
